<template>
<view class="container">
<view class="form-group">
<text>用户名：</text>
<input v-model="username" type="text" placeholder="请输入用户名" />
</view>
 
<view class="form-group">
  <view style="margin-left: 30rpx;"></view>
<text>密码：</text>
<input v-model="password" type="password" placeholder="请输入密码" />
</view>
<view class="btn-login">
<button @click="login">登录--vue3版本</button>
</view>
</view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

let username = ref('admin')
let password = ref('123456')
let identify = ref('')

onShow(()=>{
	uni.clearStorageSync('identify')
})

const login = ()=>{

	// 根据用户名和密码来确定身份
	if(username.value === 'tom' && password.value === '123456'){
		identify.value = 'tom'
	}else if(username.value === 'admin' && password.value === '123456'){
		identify.value = 'admin'
	}else{
		// 用户名或密码错误
		console.log('用户名或密码错误');
		return;
	}

	//本地存储
	uni.setStorageSync('identify', identify.value);

	// 跳转到首页
	uni.switchTab({
	  url: '/pages/index/index'
	});
}
</script>

<style lang="scss" scoped>
	.container {
	padding: 30rpx;
	}
	 
	.form-group {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	margin-bottom: 30rpx;
	}
	input{
	  border: 1rpx solid #00BAB2;
	  padding: 10rpx;
	}
	button {
	background-color: #00BAB2;
	color: white;
	border: none;
	border-radius: 20rpx;
	}
</style>